<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=0"
    />
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
  <script>
    $(function () {
      /** es5方式继承 **/
      function Parent() {
        this.type = 'parent'
      }
      Parent.prototype.getType = function() {
        return this.type;
      }
      function Child(a, b) {
        this.a = a;
        this.b = b;
      }
      Child.prototype = new Parent();
      const c = new Child(3,4)
      console.log(c.getType()); // parent
      console.log(c instanceof Parent); // true
      console.log(c instanceof Child);  // true
      console.log(c.prototype === Parent._proto_); // true

      /** es6方式继承 **/
      class Food {
        constructor() {
          this.name = 'food';
          this.sex = 'male';
        }
        getName() {
          return this.name;
        }
        getNames() {
          return this.sex;
        }
      }
      Food.getType = () => {
        return 'is parent';
      }
      class Vegetable extends Food {
        // super指向的父类的原型对象
        constructor(sex) {
          super();
          this.sex = sex;
          console.log(super.getName()); // food
          console.log(super.getNames()); // famale
        }
        getType() {
          console.log(super.prototype) // 报错
        }
        // 静态方法中使用指向的是父类本身
        static getParentType() {
          console.log(super.getType())
        }
      }
      
      const v = new Vegetable('famale'); // food
      v.getType();// 这句话执行之后会报错
      Vegetable.getParentType(); // is parent
    
    });
  </script>
</html>
